import { Card, Pagination } from 'antd';
import equal from "deep-equal"
import { toJS } from "mobx"
import { WeaLocaleProvider, WeaZmage, WeaTools, WeaTextarea } from 'ecCom';
import ViewContactLogItem from './ViewContactLogItem'

const getLabel = WeaLocaleProvider.getLabel;


class ViewContactLog extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            page: props.page || 1,
            workPlanvisible: false,
            workPlanId: "",
            workPlanTab: "1"
        }
    }
    componentDidMount() {

    }
    shouldComponentUpdate(nextProps, nextState) {
        if (!equal(this.props.data, nextProps.data)) {
            this.setState({ page: 1 })
        }
        return !equal(this.props.data, nextProps.data) ||
            !equal(this.props.total, nextProps.total) ||
            !equal(this.state.page, nextState.page) ||
            !equal(this.state.workPlanvisible, nextState.workPlanvisible) ||
            !equal(this.state.workPlanTab, nextState.workPlanTab);
    }
    render() {
        const { page, workPlanvisible, workPlanId, workPlanTab } = this.state;
        const { data = [], total } = this.props;
        const account = WeaTools.ls.getJSONObj('theme-account');
        let WorkPlanCreate = {};
        if (window.weaWorkplan) {
            WorkPlanCreate = weaWorkplan.com.WorkPlanCreate
        }
        return (
            <div className="crm-view-contactlog">
                {this.getCards()}
                {
                    data.length > 0 ?
                        <div ><Pagination defaultCurrent={1} total={total} showTotal={total => getLabel(18609, "共") + total + getLabel(18256, "条")} onChange={this.changePageSize} /></div>
                        : <div className="crm-no-datas-show">{getLabel(82090, "无匹配的结果！")}</div>
                }
                {/* {window.weaWorkplan && (
                    <WorkPlanCreate
                        type={"preview"}//新建为'create',查看为'preview',编辑edit,共享share
                        visible={workPlanvisible}//显隐受控
                        doClose={() => {
                            this.workplanClose();
                        }}//关闭回调
                        onlyClose={() => {
                            this.workplanClose();
                        }}//关闭回调,只做关闭操作
                        workPlanId={workPlanId} //日程id，1查看日程时用到
                        createConditionParams={[]}//创建的默认值日期和时间,没有传[]
                        activeKey={workPlanTab} //查看页面显示的面板1是基本信息，7是相关交流
                        changeTab={
                            //查看页面切换面板的回调
                            (key) => {
                                this.setState({ workPlanTab: key });
                            }
                        }
                        selectUser={account && account.userid}//新建日程的创建人id
                        workPlanTypeOptions={3}//客户模块的新建日程，普通新建传'',客户新建传3
                        crmIDs={[]}//通过客户模块新建日程，并自动带出相关客户,[{'id':'','name':''}]
                        description={""}//客户模块需求，支持新建时传入的'基本信息-内容'
                    />
                )} */}
            </div>
        )
    }
    workplanShow(workPlanId) {
        //this.setState({ workPlanvisible: true, workPlanId: workPlanId });
        const {  setWorkplanId } = this.props.store;
        setWorkplanId(workPlanId);

    }
    workplanClose() {
        this.setState({ workPlanvisible: false });
        this.changePageSize(this.state.page);// 刷新当前页
    }
    getCards() {
        const { data } = this.props;
        const { page } = this.state;
        let cards = [];
        toJS(data).map((item, index) => {
            let min = 10 * Number(page) - 10;
            let max = 10 * Number(page) - 1;
            if (index >= min && index <= max) {
                if (item.selectType == "info") {
                    cards.push(
                        <div key={index}><ViewContactLogItem item={item} /> </div>
                    )
                } else {
                    const { id, name, startMonth, startDay, endMonth, endDay, statusPlan, statusPlanSpan, descriptionPlan } = item;
                    cards.push(<Card className="view-contactlog-card" key={index}>
                        <div className="card-left">
                            <div className="crm-plan-item-left">
                                <div className="crm-plan-item-left-title1">{endMonth}</div>
                                <div className="crm-plan-item-left-title2">{endDay}</div>
                            </div>
                        </div>
                        <div className="card-right">
                            <div className="card-right-title">
                                <a onClick={() => {
                                    this.workplanShow(id)
                                }
                                }>{name}</a>
                            </div>
                            <div className="card-right-content">
                                <div className="card-right-content-left">{descriptionPlan}</div>
                                <div className="card-right-content-right" style={{ color: statusPlan == "0" ? "red" : "green" }}>{statusPlanSpan}</div>
                            </div>
                        </div>
                        <div className="clear"></div>
                    </Card>)
                }
            }
        });
        return cards;
    }
    changePageSize = (page) => {
        this.setState({ page: page });
        typeof this.props.pageChange == "function" && this.props.pageChange(page);
    }
}

export default ViewContactLog;


// WEBPACK FOOTER //
// ./../src4js/pc4mobx/crm/components/public/ViewContactLog.js